<template>
	<div ref="chartRef" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
	if (!chartRef.value) return
	chartInstance = echarts.init(chartRef.value)
	const option = {
		tooltip: { trigger: 'item' },
		legend: { top: 'bottom' },
		series: [{
			name: '订单类型占比',
			type: 'pie',
			radius: '50%',
			data: [
				{ value: 50, name: '采购订单' },
				{ value: 30, name: '销售订单' },
				{ value: 20, name: '退货订单' }
			]
		}]
	}
	chartInstance.setOption(option)
}

onMounted(() => {
	initChart()
	window.addEventListener('resize', () => chartInstance?.resize())
})

onBeforeUnmount(() => {
	window.removeEventListener('resize', () => chartInstance?.resize())
	chartInstance?.dispose()
})
</script>
  
